<template>
  <div class="comment">
    <ul>
      <li v-for="(item,index) in Comment" :key="item.nid">
        <div class="comment_left">
          <img alt="" :src="'/api'+item.avatar">
        </div>
        <div class="comment_right">
          <img alt="" src="./image/triangle.svg">
          <h4>{{ item.user }}</h4>
          <p>{{ item.content }}</p>
          <div class="comment_info">
            <span>{{ item.create_time }}</span>
            <div>
              <span @click="likeComment(item.nid)">点赞({{ item.digg_count }})</span>
              <span @click="showinput(item.nid)">评论({{ item.comment_count }})</span>
              <span v-if="item.usernid===usernid" @click="delsub_comment(item.nid)">删除</span>
            </div>
          </div>
          <div class="sub_comment_input" v-show="index_input===item.nid">
            <textarea name="" cols="30" rows="10" v-model="sub_content"
                      :placeholder="'回复用户'+item.user"></textarea>
            <button @click="sendsub_Comment(nid,item.nid)">回复</button>
          </div>
          <div v-for="(i,j) in item.sub_comment" :key="i.nid">
            <div class="comments">
              <div class="left">
                <img alt="" :src="'/api'+i.avatar">
              </div>
              <div class="right">
                <h4>{{ i.user }}回复{{ item.user }}</h4>
                <p>{{ i.content }}</p>
                <div class="comments-info">
                  <span>{{ i.create_time }}</span>
                  <div>
                    <span>点赞({{ i.digg_count }})</span>
                    <span @click="showinput(i.nid)">评论({{ i.comment_count }})</span>
                    <span v-if="i.usernid===usernid" @click="delsub_comment(i.nid)">删除</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub_comment_input" v-show="index_input===i.nid">
              <textarea name="" cols="30" rows="10" v-model="sub_content"
                        :placeholder="'回复用户'+i.user"></textarea>
              <button @click="sendsub_Comment(nid,i.nid)">回复
              </button>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import _throttle from 'lodash/throttle'

export default {
  name: "CommentList",
  data() {
    return {
      index_input: -1,// 当前显示的评论输入框
      sub_content: '', //输入的子评论
    }
  },
  methods: {
    ...mapActions('Article', ['addcomment', 'getComment', 'delcomment', 'getArticlecontent', 'likecomment']),
    // 显示子评论的输入框回调
    showinput(nid) {
      if (nid === this.index_input) {
        this.index_input = -1
        return
      }
      this.sub_content = ''
      this.index_input = nid
    },
    // 删除评论
    delsub_comment(nid) {
      let data = {
        nid,  // 评论id
        user: this.$store.state.userinfo.nid, //用户id
      }
      this.delcomment(data).then(value => {
        if (value['code'] === 200) {
          this.getComment(this.nid)
          this.getArticlecontent({nid: this.$route.params.id, usernid: this.$store.state.userinfo.nid})
        }
      })
    },
    // 发表子评论
    sendsub_Comment(nid, rootComment) {
      let data = {
        nid,  // 文章id
        content: this.sub_content,  // 评论内容
        user: this.$store.state.userinfo.nid, //用户id
        rootComment,  // 父评论id，没有则表示为根评论
      }
      this.addcomment(data).then(value => {
        if (value['code'] === 200) {
          this.getComment(nid)
          this.getArticlecontent({nid: this.$route.params.id, usernid: this.$store.state.userinfo.nid})
          this.$message({
            message: value['info'],
            type: 'success',
          })
          this.CommentContent = ''
          this.index_input = -1
        } else {
          this.$message({
            message: value['info'],
            type: 'error'
          })
        }
      })
    },
    // 评论点赞
    likeComment: _throttle(function (nid) {
      this.likecomment(nid).then(value => {
        if (value['code'] === 200) {
          this.$message({
            message: value['info'],
            type: 'success'
          })
          this.getComment(this.nid)
        }
      })
    }, 1000, {'trailing': false})
  },
  computed: {
    ...mapState('Article', ['Comment']),
    nid() {
      return this.$route.params.id
    },
    usernid() {
      return this.$store.state.userinfo.nid
    }
  }
}
</script>

<style scoped lang="less">
.comment {
  margin-top: 20px;
  width: 100%;
  position: relative;


  ul {
    width: 100%;

    li {
      display: flex;
      margin-bottom: 20px;

      .comment_left {
        width: 60px;
        margin-right: 20px;

        img {
          width: 100%;
          transition: all 0.3s;
          border-radius: 5px;

          &:hover {
            transform: scale(1.1, 1.1);
          }
        }
      }

      .comment_right {
        position: relative;
        width: calc(100% - 80px);
        min-height: 100px;
        background-color: white;
        padding: 20px 10px 10px 10px;

        > img {
          position: absolute;
          height: 20px;
          top: 10px;
          left: -15px;
        }

        h4 {
          font-weight: bold;
          margin-bottom: 10px;
        }

        p {
          margin-bottom: 10px;
        }

        > .comment_info {
          margin-bottom: 10px;

          div {
            float: right;


            span {
              cursor: pointer; // 鼠标悬浮变手指
              margin-right: 10px;

              &:last-child {
                color: red;
                margin-right: 0;
              }
            }
          }

        }

        .comments {
          width: 100%;
          display: flex;
          margin-bottom: 10px;
          align-items: center;

          > .left {
            width: 50px;
            position: relative;
            left: 0;
            margin-right: 20px;

            > img {
              width: 100%;
              transition: all 0.3s;
              border-radius: 5px;

              &:hover {
                transform: scale(1.1, 1.1);
              }
            }
          }

          > .right {
            width: calc(100% - 50px);

            > .comments-info {
              div {
                float: right;
                cursor: pointer; // 鼠标悬浮变手指

                span {
                  margin-right: 10px;

                  &:last-child {
                    color: red;
                    margin-right: 0;
                  }
                }
              }
            }
          }
        }

        .sub_comment_input {
          position: relative;
          height: 125px;
          background-color: #f0eeee;
          padding: 15px 10px;
          box-shadow: inset 2px 2px 6px #EFEFEF;
          border-radius: 10px;
          margin-bottom: 10px;

          textarea {
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0;
            margin: 0;
            resize: none;
            background-color: #f0eeee;


            &:focus {
              outline: none;
            }
          }

          button {
            width: 75px;
            height: 35px;
            background-color: orange;
            border: 0;
            border-radius: 10px;
            color: white;
            position: absolute;
            bottom: 10px;
            right: 10px;
          }
        }
      }
    }
  }
}
</style>